let toke = localStorage.getItem("token");
if (toke) {
  let unlogin = document.querySelector("#unlogin");
  unlogin.style.display = "none";
  let logined = document.querySelector("#logined");
  logined.style.display = "block";
}
let searchObj = new URLSearchParams(location.search);
console.log(searchObj);
let id = searchObj.get("id");
console.log(id);
myAxios.get(productDetailAPI + "/" + id).then((r) => {
  let pObj = r.data.data;
  console.log(pObj);
  let bigimg = `<li class="picshow">
  <a
    class="product-image image-zoom MagicZoom"
    rel="loading-msg:Loading zoom..."
    id="main-image"
    title=""
    href="http://192.168.18.95:1337${pObj.coverImage}"
    style="
      display: inline-block;
      position: relative;
      text-decoration: none;
      outline: 0px;
      overflow: hidden;
    "
    ><img
      id="big_pic"
      src="http://192.168.18.95:1337${pObj.coverImage}"
      width="570"
      height="570"
      class="jqzoom"
      alt=""
  /></a>
</li>`;
  document.querySelector(".good-imgs ul").innerHTML = bigimg;
  let showimg = `
  <li class="active">
                  <a
                    data-seq="0"
                    id="main-image-0"
                    href="http://192.168.18.95:1337${pObj.coverImage}"
                    rev="http://192.168.18.95:1337${pObj.coverImage}"
                    rel="zoom-id:main-image;"
                    title=""
                  >
                    <img
                      src="http://192.168.18.95:1337${pObj.coverImage}"
                      width="74"
                      height="70"
                      alt="商品图"
                    />
                  </a>
                </li>`;
  document.querySelector(".picdetail-list").innerHTML = showimg;
  let html = `
  <h3 class="pord-name">${pObj.name}</h3>
  <div class="pord-tips">
    ${pObj.desc}
  </div>
  <div class="pord-price clearfix" style="height: 35px">
    <!-- 预定商品价格展示 -->
    <span class="fl pord-dispri">￥<strong>${pObj.price}</strong></span>
  </div>
  <div class="pord-detailbox clearfix">
    <div class="fl pord-sold">库存：<span>${pObj.amount}</span></div>
    <div class="fl pord-totalcom">
      累计评价：<span class="commentNum">0</span>
    </div>
    <div class="fr pord-starbox">
      <i class="ico-detail i-star0"></i>
      <span>0.0</span>
    </div>
  </div>
  <!-- -->
  <div id="blk_detail_main_spec">
    <div class="mt10 pord-color pord-sellist clearfix">
      <label class="fl">款式</label>
      <ul class="fl ml28">
        <li attrid="330" class="current" style="overflow: hidden">
          <div class="pord-selbox">标准版</div>
        </li>
      </ul>
    </div>
  </div>
  <div id="blk_detail_main_btn">
    <div class="mt10 pord-num clearfix">
      <label class="fl pt10">数量</label>
      <div class="fl ml42">
        <a
          href="javascript:;" onclick="reduce(this)"
          class="fl num-plus numbtn num-plus btn_detail_main_buy_min"
          ><i class="ico-detail">-</i></a
        >
        <input
          type="text"
          size="2"
          maxlength="3"
          stock_num="9716"
          limit_num="0"
          class="fl nummidbtn num inpt_detail_main_buy_num"
          value="1"
          readonly="readonly"
        />
        <a
          href="javascript:;" onclick="add(this)"
          class="fl numbtn num-minus btn_detail_main_buy_plus"
          ><i class="ico-detail">+</i></a
        >
      </div>
      <span class="pord-stock">（库存充足）</span>
    </div>
    <div class="pord-btn clearfix">
      <a
        id="btn_detail_cart_add"
        href="javascript:;"
        class="fl joincart-btn"
        >加入购物车</a
      >
      <a
        id="btn_detail_cart_buy"
        href="javascript:;"
        class="fl ml30 buy-btn"
        >立即购买</a
      >
      <a
        href="javascript:;"
        class="fl btn-collect"
        style="display: block"
      >
        <i class="ico-detail ico-collect"></i>
        <span>收藏</span>
      </a>
    </div>
  </div>
        `;
  //页面结构异步请求成功以后才有的
  document.querySelector(".product-info").innerHTML = html;

  let cartAddBtn = document.querySelector("#btn_detail_cart_add");
  console.log(cartAddBtn); //null --- 因为页面中一开始 是没有加入购物车按钮-- 请求成功以后才有的，在这里是获取不到的

  //  给事件处理函数 加个async ，函数里面就可以使用await
  cartAddBtn.onclick = async () => {
    console.log("点了 加入购物车按钮");

    let product = id;
    let price = pObj.price;
    let amount = document.querySelector(".inpt_detail_main_buy_num").value;
    // myAxios.get(cartAddAPI,{params:{uid,pid:id,pnum}}).then
    let res = await myAxios.post(cartAddAPI, {
      product,
      amount,
      price,
    });
    console.log(res.data);
    alert("加入购物车成功");
  };
});
//购物车跳转
// let cart = document.querySelector(".cart");
// cart.onclick = function () {
//   location.href = "购物车.html";
// };

// 3-修改
// 修改的请求 ，修改成功以后 修改dom

function add(btn) {
  // 获取 要修改的数字
  let pnumIpt = btn.parentNode.querySelector(".inpt_detail_main_buy_num");
  let pnum = parseInt(pnumIpt.value);
  pnum++;
  console.log(pnum);

  //数据中 对应的元素的pnum 修改 renderList
  pnumIpt.value = pnum;
}
//减少
function reduce(btn) {
  // 获取 要修改的数字
  let pnumIpt = btn.parentNode.querySelector(".inpt_detail_main_buy_num");
  let pnum = parseInt(pnumIpt.value);
  if (pnum == 1) {
    return;
  }
  pnum--;
  console.log(pnum);

  //数据中 对应的元素的pnum 修改 renderList
  pnumIpt.value = pnum;
}
//购物车商品数
let num = document.querySelector(".navico-cartnum");
console.log(num);
let cartArr = [];
async function loadCartList() {
  // 解构 出data属性
  let { data } = await myAxios.get(cartListAPI);
  cartArr = [...data.data];
  console.log(cartArr);
  num.innerHTML = cartArr.length;
}
loadCartList();